<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>我参与的Chat</title>
</head>
<link rel="stylesheet" type="text/css" href="../styles/index.css">
<script type="text/javascript">
	(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '20px';
                }else{
                    docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<body class="hbg">
	<div class="warp">

		<section class="partake">
			<p class="chatMsg">您有 1 场share待评价<span></span></p>
			<ul>
				<li>
					<div class="fl">
						<p class="img">
							<img src="../images/temp/logo3.jpg" alt="">
							<span>评分</span>
						</p>
						<a href="">阅读文章</a>
						<a href="">进入直播</a>
					</div>
					<div class="fr">
						<p class="title">京东敏捷开发套路</p>
						<!--有交流-->
						<div class="seepBox">
							<div class="seepTitle">
								<p class="seepL">预订达标</p>
								<p>文章出炉</p>
								<p class="seepR">交流日期</p>
							</div>
							<div class="seepCont seep"></div>
							<div class="seepCont seep01"></div>
							<div class="seepCont seep02"></div>
							<div class="seepCont seep03"></div>
							<div class="seepTitle">
								<p class="seepL">04月30日</p>
								<p>05月14日</p>
								<p class="seepR">05月18日</p>
							</div>
						</div>
						
						<!--无交流-->
						<div class="seepBox notChange">
							<div class="seepTitle">
								<p class="seepL">预订达标</p>
								<p class="seepR">文章出炉</p>
							</div>
							<div class="seepCont seep"></div>
							<div class="seepCont seep01"></div>
							<div class="seepCont seep02"></div>
							<div class="seepTitle">
								<p class="seepL">04月30日</p>
								<p class="seepR">05月18日</p>
							</div>
						</div>
						<p class="time"><i></i>今日 20:30</p>
					</div>
				</li>

				<li>
					<div class="fl">
						<p class="img">
							<img src="../images/temp/logo2.jpg" alt="">
							<span>评分</span>
						</p>
						<a href="">阅读文章</a>
						<a href="">进入直播</a>
					</div>
					<div class="fr">
						<p class="title">京东敏捷开发套路</p>
						<div class="seepBox">
							<div class="seepTitle">
								<p class="seepL">预订达标</p>
								<p>文章出炉</p>
								<p class="seepR">交流日期</p>
							</div>
							<div class="seepCont seep02"></div>
							<div class="seepTitle">
								<p class="seepL">04月30日</p>
								<p>05月14日</p>
								<p class="seepR">05月18日</p>
							</div>
						</div>
						<p class="end"><span><a href="">找相似</a></span>活动已结束</p>
					</div>
				</li>

				<li>
					<div class="fl">
						<p class="img">
							<img src="../images/temp/logo1.jpg" alt="">
						</p>
						<a href="">阅读文章</a>
						<a href="">进入直播</a>
					</div>
					<div class="fr">
						<p class="title">京东敏捷开发套路</p>
						<div class="seepBox">
							<div class="seepTitle">
								<p class="seepL">预订达标</p>
								<p>文章出炉</p>
								<p class="seepR">交流日期</p>
							</div>
							<div class="seepCont seep03"></div>
							<div class="seepTitle">
								<p class="seepL">04月30日</p>
								<p>05月14日</p>
								<p class="seepR">05月18日</p>
							</div>
						</div>
						<p class="time"><i></i>今日 20:30</p>
					</div>
				</li>
			</ul>
		</section>
		
		<footer class="footer">
			<nav class="nav">
				<ul>
					<li class="active">
						<a href="">
							<span class="navA"></span>
							<p>发现</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navB"></span>
							<p>圈子</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navC"></span>
							<p>阅读</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navD"></span>
							<p>我</p>
						</a>
					</li>
				</ul>
			</nav>
		</footer>
	</div>
</body>
<script src='../js/jquery-1.9.1.js'></script>
<script src='../js/common.js'></script>
<script type="text/javascript">
	$(function(){

		/*点击评分*/
		$('.partake .img span').click(function(){
			$(document).popUp('<div class="popBox scoreBox">'+
				'<div class="popBg"></div>'+
				'<div class="popInfo">'+
					'<form>'+
						'<div class="pingBox">'+
							'<p class="img"><img src="../images/temp/logo1.jpg" alt=""></p>'+
							'<p><input class="checkbox" type="checkbox" value="" />关注作者</p>'+
							'<p class="xingBox">'+
								'<span></span>'+
								'<span></span>'+
								'<span></span>'+
								'<span></span>'+
								'<span></span>'+
							'</p>'+
							'<p>请为匠心宝 BoB 京东本场Chat的表现作出评分</p>'+
						'</div>'+
						'<div class="textBox">'+
							'<p class="tallMsg">您对本场Chat有什么建议？</p>'+
							'<textarea class="textarea"></textarea>'+
							'<p class="msg"><span>0</span>/200</p>'+
						'</div>'+
						'<div class="clickBox">'+
							'<button>提交</button>'+
						'</div>'+
					'</form>'+
				'</div>'+
			'</div>');
		});

		/*关闭提示*/
		$('.chatMsg span').click(function(){
			$('.chatMsg').hide();
		})

		/*星评*/
		$(document).on('click','.xingBox span',function(){
			var num=$(this).index();
			for(i=0;i<num;i++){
				$(".xingBox span:eq("+i+")").addClass("active");
			};
			for(i=num;i<5;i++){
				$(".xingBox span:eq("+i+")").removeClass("active");
			};
			$(this).addClass('active');
		})
		
	})
</script>
</html>